<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>秒杀活动</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 18px">发布产品秒杀活动</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="primary">发布</el-button> -->
        <!-- <el-button type="primary" class="createBtn">发布</el-button> -->
        <img src="../../assets/bank2.png" alt="" class="createBtn" />
      </div>

      <!-- details -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="秒杀名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <!-- <el-form-item label="上传图片"> -->
        <!-- <el-input v-model="form.picture"></el-input> -->
        <!-- <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="form.mageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->

        <el-form-item label="秒杀时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2"
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;——</el-col
          >
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="活动类别">
          <el-radio-group v-model="form.resource">
            <el-radio label="存款产品"></el-radio>
            <el-radio label="贷款产品"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="利率">
          <el-input v-model="form.rate" style="width: 15%"></el-input>
        </el-form-item>

        <el-row class="row">
          <el-col :span="9">
            <el-form-item label="产品数量">
              <el-input v-model="form.sum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9" class="single">
            <el-form-item label="产品单价">
              <el-input v-model="form.single"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="限购份数">
          <el-input-number
            v-model="form.num"
            @change="handleChange"
            :min="1"
            :max="1"
            label="描述文字"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="发布人员">
          <el-select v-model="name" disabled>
            <!-- <el-option label="陆成杰" value="lcj"></el-option>
            <el-option label="张子怡" value="zzy"></el-option>
            <el-option label="张效曹" value="zxc"></el-option>
            <el-option label="汤开诚" value="tkc"></el-option>
            <el-option label="胡珍燕" value="hzy"></el-option> -->
          </el-select>
        </el-form-item>

        <el-form-item label="准入规则">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即发布</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { createActivity } from "../../network/home.js";
export default {
  data() {
    return {
      form: {
        name: "",
        date1: "",
        date2: "",
        resource: "",
        sum: "",
        single: "",
        region: "",
        delivery: false,
        desc: "",
        num: 1,
        imageUrl: "",
        rate: 0,
      },
      name: ''
    };
  },
  created(){
    this.getName();
  },
  methods: {
    getName(){
      this.name = this.$root.ADMIN.admin_name
    },
    onSubmit() {
      // console.log(this.form.desc);
      // const data =
      //   this.form.date1.getFullYear() +
      //   "-" +
      //   this.form.date1.getMonth() +
      //   "-" +
      //   this.form.date1.getDay() +
      //   " " +
      //   this.form.date2.getHours() +
      //   ":" +
      //   this.form.date2.getMinutes() +
      //   ":" +
      //   this.form.date2.getSeconds();
      const data = this.form.date1 + " " + this.form.date2.getHours() + ":" + this.form.date2.getMinutes() + ":" + this.form.date2.getSeconds();
      // console.log(this.form.date2);
      // console.log(data);
      createActivity(
        data,
        "2029-12-01 10:10:11",
        this.form.desc,
        this.form.single,
        this.form.sum,
        this.form.num,
        this.form.resource,
        4,
        "123",
        this.form.name,
        this.form.rate
      ).then((res) => {
        if (res == true) alert("创建成功");
          this.$router.replace('/detail')
      });
    },
    handleChange(value) {
      console.log(value);
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.createBtn {
  width: 150px;
  height: 35px;
  float: right;
  padding: 3px 0;
  margin-top: -6px;
}
.single {
  margin-left: 30px;
}
/* 上传图片 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>